<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 类</title>
    <script src="../../lib/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="../../CssTest/css/base.css">
    <style>

        .intro{
            font-size: 20px;
            color: yellowgreen;
            background-color: rosybrown;
        }

        .another{
            background-color: #6b94ff;
        }

        button{

            display: block;
            margin-top: 15px;
            margin-bottom: 10px;
            border: 1px #8cebff solid;

        }

    </style>



</head>
<body>

<p>这是段落1</p>
<p>这是段落2</p>

<hr class="hr1">


<div class="title">addclass()方法</div>


<div class="pDefinitions">该方法向被选择元素添加一个或者多个类名<span class="pMark">(注:该方法不会移除已存在的class属性,仅仅添加一个或多个类名到clss属性)</span> </div>



<button id="button1">给div1添加类名</button>
<button id="button2">给div1添加两个类名</button>


<div class="title">removeClass方法</div>

<button id="button3">给div1元素移除类</button>



<div class="title">toggleClass方法</div>
<button id="button4">给div1添加/移除类</button>



<div class="title">css() 获取属性方法方法</div>
<button id="button5">打印div背景颜色属性</button>
<p class="pMark">注:css方法使用方式 被选对象.css("propertyname")可以打印说有属性值</p>


<div class="title">css 设置被选元素属性</div>

<p id="px1">说好不哭-周杰伦</p>

<button id="button6">给px1设置属性</button>



<hr class="hr1">


<script>

    $(document).ready(function () {

        $("#button1").click(function () {

            $("p:first").addClass("intro");
        });

        $("#button2").click(function () {

            $("p:first").addClass("intro another");
        });
        $("#button3").click(function () {

            $("p:first").removeClass("intro");
        });
        $("#button4").click(function () {

            $("p:first").toggleClass("intro");
        });

        $("#button5").click(function () {

          var alertString  = $("p:first").css("background-color");
          alert(alertString);
        });
        $("#button6").click(function () {


            $("p:last").css({"background-color":"red","border":"1px #8cebff solid"});

        })


    })


</script>



</body>
</html>